import React from 'react';
import { Form, Icon, Input, Button, Row, Col, message } from 'antd';
import { drawCode, resetCode } from '@/utils';
import { FormComponentProps } from 'antd/lib/form'
import { postFn } from '@/api/commonApi';
interface FormProps extends FormComponentProps {
    goPath: any,
    username: string,
}
class LoginCom extends React.Component<any, any>{
    constructor(props: any) {
        super(props);
        this.state = {
            confirmDirty: false,
            captcha: "",
            username: "",
        };
    }
    componentDidMount() {
        this.setState({ captcha: drawCode(), username: this.props.username || "" });
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form onSubmit={this.handleSubmit} className="login-form">
                <Form.Item>
                    {getFieldDecorator('username', {
                        initialValue: this.state.username,
                        rules: [{ required: true, message: '请输入账号' }],
                    })(
                        <Input
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="登陆账号"
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('password', {
                        rules: [{ required: true, message: '请输入密码' }],
                    })(
                        <Input
                            prefix={<Icon type="unlock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            type="password"
                            placeholder="登陆密码"
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    <Row gutter={10}>
                        <Col span={14}>
                            {getFieldDecorator('captcha', {
                                rules: [{ required: true, message: '请输入验证码!' }],
                            })(<Input prefix={<Icon type="safety" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                placeholder="请输入验证码" />)}
                        </Col>
                        <Col span={10}>
                            <canvas width="100" height="40" id="verifyCanvas"></canvas>
                            <img id="code_img" alt="验证码" style={{ borderRadius: "3px" }}
                                onClick={() => { this.setState({ captcha: resetCode() }) }} />
                        </Col>
                    </Row>
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" block>
                        登陆
                    </Button>
                </Form.Item>
                <Form.Item>
                    <div className="text-right">
                        <a href="#/login/setpassword" className="mr-10">忘记密码?</a>
                        <span className="mr-10">|</span>
                        <a href="#/login/register">立即注册</a>
                    </div>
                </Form.Item>
            </Form>
        )
    }
    handleSubmit = (e: any) => {
        e.preventDefault();
        const { form } = this.props;
        form.validateFields(async (err: any, values: any) => {
            // 获取已经输入的验证
            let captcha = values.captcha;
            // 获取验证答案
            let count = this.state.captcha;
            if (captcha.toUpperCase() !== count) {
                form.setFields({ captcha: { value: captcha, errors: [new Error('您输入的验证码不正确')] } });
                return;
            }
            if (!err) {
                let res: any = await postFn('loginUser', values);
                if (!res) return;
                if (res.isok) {
                    message.success(res.msg, 5)
                    this.props.goPath('/');
                } else {
                    message.error(res.msg, 5)
                    this.setState({ captcha: resetCode() });
                }
            }
        });
    };
}

export default Form.create<FormProps>()(LoginCom);